<template>
    <div class="main manage-container">
      <section>
        <div style="padding: 10px 0;">
          <el-button type="primary" size="mini" v-loading="exportLoading" @click="handleExport" v-if="rightsButtons['export']">导出</el-button>
          <!-- <el-button type="primary" size="mini" v-loading="exportLoading" @click="handleExport" v-if="rightsButtons['delete']">作废</el-button> -->
          <!-- <el-button type="primary" size="mini" @click="handleRedPush" v-if="rightsButtons['apply']">红冲申请</el-button> -->
          <!-- <el-button type="primary" size="mini" @click="demoClick(2)">红冲</el-button> -->
        </div>
        <searchForm :listQuery="listQuery" :queryConfig="queryConfig" :search="search"/>
        <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- <el-table-column align="center" label="电子发票单号" prop="contractNo" width="130"> 没有
          </el-table-column> -->
          <el-table-column align="center" label="订单号" prop="orderNo" min-width="160">
             <template slot-scope="scope">
              <span class="click-btn" @click="lookTaxDetail(scope.row)">{{scope.row.orderNo}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="合同号" prop="contractNo"></el-table-column> -->
          <el-table-column align="center" label="发票抬头" prop="invoiceTitle" ></el-table-column>
          <el-table-column align="center" label="纳税人识别号" prop="taxpayerIdentifyNo"></el-table-column>
          <el-table-column align="center" label="发票数" prop="invoiceNum" ></el-table-column>
          <el-table-column align="center" label="发票金额" prop="invoiceAmount" ></el-table-column>
          <el-table-column align="center" label="状态" prop="invoiceStatus">
            <template slot-scope="scope">
              {{invoiceStatusTxt(scope.row)}}
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="备注" prop="remark" min-width="160"></el-table-column> -->
          <el-table-column align="center" label="备注" prop="remark" ></el-table-column>
          <el-table-column align="center" label="操作人" prop="createOperator"></el-table-column>
          <el-table-column align="center" label="生成时间" prop="createAt"></el-table-column>
          <!-- <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="lookTaxDetail(scope.row)" v-if="rightsButtons['detail']">查看详情</el-button>
            </template>
          </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </section>
    <el-dialog title="发票详情" :visible.sync="dialogVisibleDetail" top="50px">
      <!-- <redPushCom id="1"/> -->
      <detailCom  :status="status" :formData="formData" @close="dialogVisibleDetail=false"/>
      <!-- <invoiceDetailCom v-if="isApplying" v-else :formData="formData" @close="dialogVisibleDetail=false"/> -->
    </el-dialog>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
// import redPushCom from './components/redPushCom'
import invoiceDetailCom from './components/invoiceDetailCom'
import detailCom from './components/detailCom'
export default {
  components: {
    searchForm,
    // redPushCom,
    invoiceDetailCom,
    detailCom
  },
  data() {
    const invoiceStatusArr = [
      {label: '待红冲', value: 'INVOICE_WAIT_APPLY'},

    ]
     const invoiceTypeArr = [
      {label: '电子发票', value: 'ELECTRONIC_INVOICE'},
      {label: '纸质发票', value: 'PAPER_INVOICE'},
    ]
    return {
      invoiceStatusArr: invoiceStatusArr,
      invoiceTypeTxt: invoiceTypeArr,
      listQuery: {
        beginTime: '',
        createOperator: '',
        endTime: '',
        invoiceStatus: 'INVOICE_WAIT_APPLY',
        memberName: '',
        orderNo: '',
        pageNum: 1,
        pageSize: 10,
        phone: '',
        dateRange: []
      },
      listTotal: 0,
      list: [],
      queryConfig: [
        {type: 'input', label: '订单号', prop: 'orderNo', maxlength: 30},
        // {type: 'input', label: '合同号', prop: 'concatNo' }, // 合同号这个暂时没有
        {type: 'input', label: '会员姓名', prop: 'memberName'},
        {type: 'input', label: '手机号', prop: 'phone' },
        {type: 'input', label: '新建人', prop: 'createOperator' },
        // {type: 'select', label: '发票状态', prop: 'invoiceStatus', data: invoiceStatusArr },
        {type: 'datetimerange', label: '新建时间', prop: 'dateRange'},
      ],
      selectItem: [],
      listLoading: false,
      dialogVisibleDetail: false,
      exportLoading: false, // 导出
      invoiceId: '', // 发票id
      isApplying: false,
      status: '', // 发票状态 用于区分详情
      formData: {}
    }
  },
  mounted() {
    this.getList()
  },

  methods: {
    getParams() {
       const params = {
        beginTime: this.listQuery.dateRange && this.listQuery.dateRange.length === 2 ? this.listQuery.dateRange[0]:'',
        createOperator: this.listQuery.createOperator,
        endTime: this.listQuery.dateRange && this.listQuery.dateRange.length === 2 ? this.listQuery.dateRange[1]:'',
        invoiceStatus: this.listQuery.invoiceStatus,
        memberName: this.listQuery.memberName,
        orderNo: this.listQuery.orderNo,
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
        phone: this.listQuery.phone,
      }
      return params
    },
    getList() {
      this.listLoading = true
      const data = this.getParams()
      this.request({
        url: '/invoice-web-manage/invoice/info/list',
        method: 'post',
        data: data
      }).then(({data}) => {
        this.list = data.list;
        this.listTotal = data.total;
        this.listLoading = false;
      }).catch(err => {
        console.log(err);
        this.list = [];
        this.listTotal = 0;
        this.listLoading = false;
      });
    },
    // 搜索
    search(){
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 选择
    handleSelectionChange(val){
      console.log(val)
      this.selectItem = val
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    },
    // 切换分页数
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    // 导出
    handleExport(){
      this.exportLoading = true
      this.request({
        url: "/invoice-web-manage/invoice/info/export",
        method: "post",
        data: this.getParams(),
        headers: {
          extType: 'excel'
        },
        responseType: 'blob'
      }).then(res => {
        this.downloadFile(res, '电子发票.xls')
        this.exportLoading = false
      })
      .catch(err => {
        console.log(err)
        this.exportLoading = false
      });
    },
    // 状态
    invoiceStatusTxt(item) {
      const index = this.invoiceStatusArr.findIndex(i => item.invoiceStatus === i.value)
      if (index > -1){
        return this.invoiceStatusArr[index].label
      }
      return ''
    },
    // 查看发票详情
    lookTaxDetail(item){
        // isApplying: false,
      // status: '' // 发票状态 用于区分详情
      this.getInvoiceDetail(item)
    },
    getInvoiceDetail(item){
      if (!item.id) return
      this.request({
        url: `/invoice-web-manage/invoice/info/detail/${item.id}`,
        method: 'get',
        params: { invoiceId: item.id }
      }).then(data => {
        console.log(data)
        this.formData = data.data
        // 库存状态
        this.formData.invoiceApplyInfoDo.inventoryStatusTxt = ''
        if (this.formData.invoiceApplyInfoDo.inventoryStatus === 0) {
          this.formData.invoiceApplyInfoDo.inventoryStatusTxt = '不足'
        } else if (this.formData.invoiceApplyInfoDo.inventoryStatus === 1) {
          this.formData.invoiceApplyInfoDo.inventoryStatusTxt = '充足'
        }
        // 状态
        this.formData.invoiceApplyInfoDo.invoiceStatusTxt = ''
        const index = this.invoiceStatusArr.findIndex(i => i.value === this.formData.invoiceApplyInfoDo.invoiceStatus)
        if (index > -1){
            this.formData.invoiceApplyInfoDo.invoiceStatusTxt =  this.invoiceStatusArr[index].label
        }

        if(!this.formData.invoiceApplyInfoDo.createOperator) {
          this.formData.invoiceApplyInfoDo.createOperator =  this.formData.invoiceApplyInfoDo.updateOperator
        }

        // 发票性质
        this.formData.invoiceApplyInfoDo.invoiceTypeTxt = ''
        const index1 = this.invoiceTypeTxt.findIndex(i => i.value === this.formData.invoiceApplyInfoDo.invoiceType)
        if (index1 > -1){
          this.formData.invoiceApplyInfoDo.invoiceTypeTxt =  this.invoiceTypeTxt[index1].label
        }
         const arr = ['INVOICE_SUCCESS', 'INVOICE_FAILD', 'INVOICE_WAIT_APPLY']
      if (arr.includes(item.invoiceStatus)){
        this.isApplying = true
        if (item.invoiceStatus === 'INVOICE_SUCCESS') {
          // 开票成功
           this.status = '1'
        }
        if(item.invoiceStatus === 'INVOICE_WAIT_APPLY') {
          // 1待红冲详情
          this.status = '2'
        }
         if (item.invoiceStatus === 'INVOICE_FAILD') {
          // 开票失败
           this.status = '3'
        }

      } else {
         this.isApplying = false
      }
       this.dialogVisibleDetail = true
      }).catch(err => {
        console.log(err);
      });
    },
     // 删除
    handleDel(){
      if (!this.selectItem || this.selectItem.length <= 0) {
        this.$message.info("请选择待红冲票项目")
        return
      }
      const params = []
      this.selectItem.forEach(i => {
        params.push(i.id)
      })
      this.$confirm('删除后将无法撤回。是否删除？').then(res => {
       params.forEach((i, index) => {
         deleteInvoiceItem(id, index)
       })
      }).catch(err => console.log(err))
    },
     // 删除
    deleteInvoiceItem(id, index){
      this.request({
        url: `/invoice-web-manage/invoice/info/delete/${id}`,
        method: "post",
        params: { invoiceId: id}
      }).then(res => {
        if (index === (this.selectItem.length - 1)){
          this.getList()
          this.$message.success("操作成功")
        }
        console.log(res)
      })
      .catch(err => {
        console.log(err)
      });
    }
  }
}
</script>
<style lang="scss" scoped>
 .manage-container {
   /deep/ .el-dialog {
    max-width: 1600px;
  }
  .click-btn {
    color: #409EFF;
    cursor:pointer
  }
 }
</style>
